<template>
  <div>
    <div>
      <input type="text" @input="handleInputChange" :value="inputValue">
      <button @click="() => handleSubmit(inputValue)">submit</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
// import {defineComponent, reactive, ref} from 'vue'
import inputEffect from './effects/inputEffect'
import listEffect from './effects/listEffect'
export default {
  // setup(props, context) {
  //   const inputValue = ref('')

  //   const list = reactive([])

  //   const handleInputChange = e => {
  //     console.log('handleInputChange', handleInputChange)
  //     inputValue.value = e.target.value
  //   }

  //   const handleSubmit = () => {
  //     list.push(inputValue.value)
  //   }

  //   return {
  //     inputValue,
  //     handleInputChange,
  //     handleSubmit,
  //     list
  //   }
  // }

  // 封装相关effect
  // const inputEffect = () => {
  //   const inputValue = ref('')
  //   const handleInputChange = e => {
  //     inputValue.value = e.target.value
  //   }
  //   return {
  //     inputValue,
  //     handleInputChange
  //   }
  // }

  setup(props, context) {
    const { list, handleSubmit } = listEffect()
    const { inputValue, handleInputChange } = inputEffect()

    return {
      list,
      handleSubmit,
      inputValue,
      handleInputChange
    }
  }
}
</script>